<script setup>
import { ref, reactive } from 'vue'
import { getUser, deleteUser } from '@/assets/api/system'
const dataList = ref([])
const loading = ref(false)
const loaded = ref(false)
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
function getData(page) {
    loading.value = true
    const params = Object.assign({ page }, filterForm)
    getUser(params)
        .then((res) => {
            loading.value = false
            loaded.value = true
            const { Items, currentPage, totalSize } = res.data
            dataList.value = Items
            currentPage.value = currentPage
            total.value = totalSize
        })
        .catch(() => {
            loading.value = false
        })
}
const filterForm = reactive({
    page: 1,
    limit: pageSize,
})
function searchAction() {
    getData(currentPage.value)
}
const ruleFormRef = ref()
function resetcAction(formEl) {
    if (!formEl) return
    formEl.resetFields()
}
function handleCurrentChange(e) {
    getData(e)
}
getData(1)

import newModal from '@/components/system/userNew.vue'
const newModalVisible = ref(false)
const activeData = ref(null)
function newAction() {
    activeData.value = null
    newModalVisible.value = true
}
function editAction(item) {
    activeData.value = item
    newModalVisible.value = true
}

import passwordModal from '@/components/system/userPwd.vue'
const pwdModalVisible = ref(false)
function editPwdAction() {
    pwdModalVisible.value = true
}

import { showMsg, showConfirm } from '@/assets/js/utils'
function deleteAction(item) {
    showConfirm({
        content: '您确定要删除该数据吗?',
        onConfirm: () => {
            deleteUser({ id: item.id }).then(() => {
                showMsg('删除成功')
                getData(currentPage.value)
            })
        },
    })
}
</script>
<template>
    <div class="filter-box white-box d-flex">
        <el-form
            ref="ruleFormRef"
            :inline="true"
            :model="filterForm"
            class="d-flex-1"
        >
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="filterForm.userName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-select v-model="filterForm.state" placeholder="请选择">
                    <el-option label="正常" value="1" />
                    <el-option label="禁用" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchAction">搜索</el-button>
                <el-button type="default" @click="resetcAction(ruleFormRef)"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <div class="el-form-item">
            <el-button type="primary" @click="newAction">新增</el-button>
        </div>
    </div>
    <div class="white-box mt-20 d-flex-1 overflow-auto">
        <el-table :data="dataList" class="my-10 full">
            <el-table-column label="用户名称" prop="userName" />
            <!-- <el-table-column label="角色" prop="address" /> -->
            <el-table-column label="状态" prop="state">
                <template #default="scope">
                    {{ scope.row.state == 1 ? '正常' : '禁用' }}
                </template>
            </el-table-column>
            <el-table-column label="创建日期" prop="creationDate" />
            <el-table-column label="备注" prop="remark" />
            <el-table-column label="操作" prop="address" width="150">
                <template #default="scope">
                    <el-tooltip effect="dark" content="编辑" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="editAction(scope.row)"
                        >
                            <el-icon size="16"><Edit /></el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip
                        effect="dark"
                        content="修改密码"
                        placement="top"
                    >
                        <el-button
                            type="primary"
                            link
                            @click="editPwdAction(scope.row)"
                        >
                            <el-icon size="16"><Lock /></el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="deleteAction(scope.row)"
                        >
                            <el-icon size="16"><Delete /></el-icon>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="fl-bw">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
    <newModal
        v-model:visible="newModalVisible"
        v-if="newModalVisible"
        :activeData="activeData"
        @success="getData(currentPage)"
    ></newModal>
    <passwordModal v-model:visible="pwdModalVisible"></passwordModal>
</template>
<style lang="scss" scoped></style>
